<template>
<div class="user-list">
  <el-card class="box-card">
    <template #header>
      <div class="card-header text-2xl font-bold">
        <span @click="app.$patch((state)=>{state.count=state.count+1})">用户列表</span>
      </div>
    </template>
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="用户名" width="180" />
      <el-table-column prop="email" label="邮箱" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" @click="viewUser(scope.row.id)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <HelloWorld msg="Hello Vue 3 + Vite + Element Plus" />
  {{ app.count }}
</div>
</template>

<script setup lang="ts">
import AppStore from '@/stores';
const router = useRouter()
const app = AppStore()
console.log(app, 'AppStore');

const users = [
  {
    id: 1,
    name: '示例用户1',
    email: 'user1@example.com'
  },
  {
    id: 2,
    name: '示例用户2',
    email: 'user2@example.com'
  },
  {
    id: 3,
    name: '示例用户3',
    email: 'user3@example.com'
  }
]

const viewUser = (id: number) => {
  router.push(`/users/${id}`)
}
</script>

<style scoped>
.user-list {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>